<template>
    <div class="thsh-box">
    <ul>
        <van-list
            style="flex-direction: column;"
            v-model="loading"
            :finished="finished"
            :error.sync="error"
            :immediate-check="immediateCheck"
            error-text="请求失败，点击重新加载"
            finished-text="没有更多了"
            @load="onLoad"
            >
        <li v-for="(item,index) in resData" :key="index">
        <div class="goods-wraper">
          <div class="order">
            <div class="order-info">
              <div class="info-left">
                <p>订单: {{item.complain_order_no}}</p>
                <p>时间: {{item.create_time}}</p>
              </div>
              <div class="info-right">
                <span >{{item.refund_type ==1?'退款商品':item.c_type==2?'退货商品':'换货商品'}}</span>
                <span class="audit sh-box"  v-if="item.is_drop_shipping==1">待审核</span>
              </div>
            </div>
            <div class="hr"></div>
            <div class="goods-list">
                <div class="goods-info" v-for="(items,indexs) in item.itemList" :key="indexs">
                  <div>
                     <img :src="items.pic_url" alt="">
                  </div>
                  <div class="content-info">
                    <p>{{items.title}}</p>
                    <p>￥{{items.current_price}}</p>
                  </div>
                  <div>
                    <p>X{{items.num}}</p>
                  </div>
                </div>
            </div> 
          </div>
          <div class="price-info">
            <p>总价: <span class="total-price">{{item.order_total_price}} </span> 实付款: <span class="real-price">￥{{item.order_payment_price}}</span></p>
            <div class="sh-box">
                <p class="review-detail" @click="openDetailPage(item)">详情</p>
                <p class="refuse" v-if="item.is_drop_shipping==1"  @click="sh(item.order_id,item.complain_order_id,2)">拒绝</p>
                <p v-if="item.is_drop_shipping==1"   @click="sh(item.order_id,item.complain_order_id,1)">同意</p>
            </div> 
          </div>
        </div>
      </li>

        </van-list>
    </ul>
    <div v-if="finished && resData.length == 0">
        <no-data :noDataImg = 'noDataImg'></no-data>
      </div>        
    </div>
</template>

<script>
import noData from '@/components/noData/index'
import { exchangeList, handleComplainOrder } from '@/api/dz/dzApi.js'

import Vue from 'vue'
import { Dialog } from 'vant'
import { List } from 'vant'
Vue.use(Dialog)
Vue.use(List)
export default Vue.extend({
  components: {
    noData
  },
  data() {
    return {
      page: 1,
      loading: false,
      finished: false,
      error: false,
      immediateCheck: false,
      resData: [],
      noDataImg: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png'
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    /* 审核接口 */
    sh(order, complain, audit) {
      const order_id = order
      const complain_order_id = complain
      const is_audit = audit
      const data = { order_id, complain_order_id, is_audit }
      handleComplainOrder(data).then(res => {
        if (res.status == 1) {
          this.$Error(res.msg)
          this.$JumpName(this, 'ltnsDhsthSh')
        } else {
          this.$Error(res.msg)
        }
      })
    },
    onLoad() {
      const p = this.page
      /* 审核列表 */
      this.loading = true
      exchangeList({p}) .then(res => {
        this.loading = false
        if (res.status == 1) {
          const data = res.data.data
          this.resData = this.resData.concat(data)
          this.page++
          if (res.data.data && res.data.data.length < 10) {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    seeXy(content) {
      Dialog.confirm({
        title: '协议',
        confirmButtonText: '了解',
        showCancelButton: false,
        message: content
      })
        .then(() => {
          // on confirm
        })
    },
    openDetailPage(item) {
      const { order_id, complain_order_id } = item
        this.$JumpName(this, 'ltnsOrderDetail', { order_id, complain_order_id })
    }
  },
  mounted() {
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  }
})
</script>

<style lang="scss">
.thsh-box{
  padding: 30px;
  background:#F7F7F7;
}
ul{
    li{
        padding: 20px;
        border-radius: 20px;
        padding: 10px;
        background: #fff;
        margin-top: 30px;
    }
    .goods{
      font-size: 28px;
      margin-bottom: 30px;
      background: #fff;
      .td-info{
        margin: 20px 0 0 0;
        background: #fff;
        font-size: 24px;
      }
      h2{
        font-size: 28px !important ;
        border-top: 1px solid #ccc;
        padding: 10px;
        font-size: 30px;
        color: red;
        margin-top: 20px;
        background: #fff;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .goods-list{
        background: #fff;
        border-radius: 20px;
        padding: 10px 0;
        width: auto;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-top: 30px;
        .goods-info{
          display: flex;
          img{
            border-radius: 10px;
            width: 100px;
            height: 100px;
            margin-right: 20px;
            background: #fff;

          }
          p{
            background: #fff;
            font-size: 24px;
          }
        }
      }
    }
    .sh-box{
        display: flex;
        justify-content: center;
        background: #fff;
        padding-bottom: 10px;
        p{
          background: #fff;
          color: crimson;
          border: 1px solid crimson;
          border-radius: 80px;
          font-size: 30px;
          padding: 10px 20px;
          margin: 0 20px;
        }
        .refuse{
          background: #fff;
          color: #717171;
          border: 1px solid #717171;
          border-radius: 80px;
          font-size: 30px;
          padding: 10px 20px;
  }
    }
    .goods-wraper {
      .order-info {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        .info-left {
          margin: 20px 0 0 0;
          background: #fff;
          font-size: 24px;
        }
        .info-right {
          font-size: 30px;
          display: flex;
          justify-content: space-between;
          .audit {
            color: #F34E5D;
            font-weight: 600;
          }
          span {
            margin-left: 15px;
            line-height: 70px;
          }
        }
      }
    }
    .hr {
      border-bottom: 1px solid #eee;
    }
    .goods-info{
      display: flex;
      padding-left: 20px;
      padding-right: 20px;
      align-items: center;
      justify-content: space-between;
      margin-top: 40px;
      .content-info {
        flex: 2;
        margin-left: 20px;
      }
      img{
        border-radius: 10px;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        background: #fff;

      }
      p{
        background: #fff;
        font-size: 24px;
        color: #343434;
        line-height: 50px;
      }
        }
  .goods-list{
    margin-top: 30px;
  }
  .price-info {
    p {
      padding-right: 20px;
      text-align: right;
      margin-bottom: 30px;
    }
    div{
      display: flex;
      justify-content: flex-end;
    }
  }
  .real-price {
    font-size: 30px;
    color: crimson;
    font-weight: bolder;
  }
  .total-price {
    font-size: 30px;
    color: #343434;
    font-weight: bolder;
  }
}
</style>